<template>
<div class="order-wrap">
	<h3>您的产品</h3>
	<div class="order-list-choose">
		<div class="order-list-option">
			选择产品：
			<v-selection :selections="products" @on-change="productChange"></v-selection>
		</div>
		<div class="order-list-option">
			开始日期
			<v-date-picker @on-change="getStartDate"></v-date-picker>
		</div>
		<div class="order-list-option">
			结束日期
			<v-date-picker @on-change="getEndDate"></v-date-picker>
		</div>
		<div class="order-list-option">
			关键词：
			<input type="text" v-model.lazy="query" class="order-query">
		</div>
	</div>
	<div class="order-list-table">
		<table>
			<tr>
				<th v-for="head in tableHeads" @click="changeOrderType(head)" :class="{active:head.active}">{{ head.label }}</th>
			</tr>
			<tr v-for="item in tableData" :key="item.perid">
				<td v-for="head in tableHeads">{{ item[head.key]}}</td>
			</tr>
		</table>
	</div>
</div>
</template>
<script>
import VSelection from '../components/base/selection'
import VDatePicker from '../components/base/datepicker'
export default {
	components: {
		VSelection,
		VDatePicker
	},
	data() {
		return {
			query: '',
			productId: 0,
			startDate: '',
			endDate: '',
			tableHeads: [
        {
          label: '订单号',
          key: 'orderId'
        },
        {
          label: '购买产品',
          key: 'product'
        },
        {
          label: '版本类型',
          key: 'version'
        },
        {
          label: '有效时间',
          key: 'period'
        },
        {
          label: '购买日期',
          key: 'date'
        },
        {
          label: '数量',
          key: 'buyNum'
        },
        {
          label: '总价',
          key: 'amount'
        }
      ],
			products: [{
					label: '数据统计',
					value: 0
				},
				{
					label: '数据预测',
					value: 1
				},
				{
					label: '流量分析',
					value: 2
				},
				{
					label: '广告发布',
					value: 3
				}
			]
			,
			currentOrder: 'asc',
			tableData: []
		}
	},
	watch: {
		query(){
			this.getList()
		}
	},
	methods: {
		productChange() {

		},
		getStartDate(date){
			this.startDate = date
			this.getList()
		},
		getEndDate(date){
			console.log(date);
		},
		getList(){
			let reqParams = {
				query: this.query,
				productId: this.productId,
				startDate: this.startDate,
				endDate: this.endDate
			}

			this.$http.post('/api/getOrderList',reqParams)
			.then((res)=>{
				this.tableData = res.data.list
			},(err)=>{

			})
		},
		changeOrderType (headItem) {
      this.tableHeads.map((item) => {
				item.active = false
        return item
      })
      headItem.active = true
			if(this.currentOrder === 'asc'){
				this.currentOrder = 'desc'
			}else if(this.currentOrder === 'desc'){
				this.currentOrder = 'asc'
			}
			this.tableData = _.orderBy(this.tableData,headItem.key,this.currentOrder)
    }
	}
	,
	mounted(){
		this.getList()
	}
}
</script>

<style scoped>
.order-wrap {
	width: 1200px;
	min-height: 800px;
	margin: 20px auto;
	overflow: hidden;
}

.order-wrap h3 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

.order-query {
	height: 25px;
	line-height: 25px;
	border: 1px solid #e3e3e3;
	outline: none;
	text-indent: 10px;
}

.order-list-option {
	display: inline-block;
	padding-left: 15px;
}

.order-list-option:first-child {
	padding-left: 0;
}

.order-list-table {
	margin-top: 20px;
}

.order-list-table table {
	width: 100%;
	background: #fff;
}

.order-list-table td,
.order-list-table th {
	border: 1px solid #e3e3e3;
	text-align: center;
	padding: 10px 0;
}

.order-list-table th {
	background: #4fc08d;
	color: #fff;
	border: 1px solid #4fc08d;
	cursor: pointer;
}

.order-list-table th.active {
	background: #35495e;
}
</style>
